<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<meta name="robots" content="all" />
<meta name="author" content="Twinsen Liang." />
<meta name="Copyright" content="Copyright (c) 2000-2009 Tencent." />
<meta name="Description" content="Regulations of WEB Code in Tencent." />
<meta name="Keywords" content="Tencent,重构,web,xhtml,css,javascript,api,seo" />
<title>Regulations of WEB Code in Tencent.</title>
<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />
<link rel="Bookmark" href="/favicon.ico" type="image/x-icon" />
<link rel="alternate" type="application/rss+xml" title="RSS news feed" href="/rss.xml" />
<style type="text/css">
<!--
body { margin: 0; font-family:Verdana, "Microsoft YaHei", sans-serif; line-height:2em; font-size:12px; color:#000; background:#FFF; }
h1 { font-size:36px; margin:200px 20px 20px; }
h2 { font-size:28px; margin:30px 0; }
ul,
ol,
li { margin:0; padding:0; }
a:link,
a:visited {color:#63ADDF;text-decoration:underline; }
a:hover,
a:active { color:#F65077; text-decoration:none; }
h2.eng { font-size:18px; margin:20px 20px 200px; }
#version { margin:20px; padding:70px 0 100px; border-top:1px dotted #CCC; }
#version .v_table { text-align:center;}
#version table { border-top:1px solid #CCC; border-left:1px solid #CCC; width:80%; margin:auto;text-align:left; }
#version th,
#version td { border-right:1px solid #CCC; border-bottom:1px solid #CCC;font-size:12px;padding:2px 7px; }
#contents,
#content { margin:20px; padding:70px 0 50px; border-top:1px dotted #CCC; }
#contents li { margin:0 20px; }
#contents li li { list-style:lower-roman; }
#content li { margin:0 20px; padding-top:10px; }
#content ol { margin-bottom:100px; }
#content ol ol { margin-bottom:0; list-style:lower-roman; }
#content ul { margin-bottom:0; list-style:square; }
#content ul ul { list-style:circle; }
#content ol ol code { display:block; background:#F1F1F1; border:1px solid #CCC; margin-bottom:10px; padding:2px 8px; }
-->
</style>
</head>
<body>
<div id="head">
	<div class="main">
		<h1>腾讯网站重构代码规范</h1>
		<h2 class="eng">Regulations of WEB Code in Tencent</h2>
	</div>
</div>
<div id="version">
	<div class="main">
		<h2>版本</h2>
		<div class="v_table">
			<table border="0" cellspacing="0" cellpadding="0">
				<tr>
					<th>版本号</th>
					<th>修改人</th>
					<th>修改点</th>
					<th>修改时间</th>
				</tr>
				<tr>
					<td>1.0</td>
					<td>Bryan、Grace、Jeanne、Tank</td>
					<td>依照各线代码规范输出雏形</td>
					<td>2009.08.08</td>
				</tr>
				<tr>
					<td>1.5</td>
					<td>Twinsen、Ray</td>
					<td>统一汇总，并整理排序，调整细节</td>
					<td>2009.08.28</td>
				</tr>
			</table>
		</div>
	</div>
</div>
<div id="contents">
	<div class="main">
		<h2>目录</h2>
		<ol>
			<li>
				<h3>背景</h3>
				<ol>
					<li>文档目的</li>
					<li>文档范围</li>
					<li>关键词</li>
				</ol>
			</li>
			<li>
				<h3>规范内容</h3>
				<ol>
					<li>基本原则</li>
					<li>具体细则</li>
					<li>质量评估标准</li>
				</ol>
			</li>
		</ol>
	</div>
</div>
<div id="content">
	<div class="main">
		<h2 id="a">一、背景</h2>
		<ol>
			<li>
				<h3>文档目的</h3>
				<ul>
					<li>使页面重构工作更系统化、专业化。</li>
					<li>减低团队成员合作开发过程中的沟通成本。</li>
					<li>提高项目中代码的维护性。</li>
				</ul>
			</li>
			<li>
				<h3>文档范围</h3>
				<p>本文档适用于腾讯公司互联网业务系统下所以项目的开发或改版；相关人员为腾讯公司互联网业务系统下所有页面重构工程师</p>
			</li>
			<li>
				<h3>关键词</h3>
				<p>重构、前端、代码、规范</p>
			</li>
		</ol>
		<h2 id="b">二、规范内容</h2>
		<ol>
			<li>
				<h3>基本原则</h3>
				<ul>
					<li>能通过W3C标准验证。</li>
					<li>结构、表现、行为三者分离。</li>
					<li>HTML可控性语义化。</li>
					<li>可扩展性。</li>
					<li>可维护性。</li>
					<li>高性能。</li>
				</ul>
			</li>
			<li>
				<h3>具体细则</h3>
				<ol>
					<li>
						<h4>Doctype声明规范</h4>
						<ul>
							<li>释　意：DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。</li>
							<li>阐　述：因当前HTML5尚为草案，且整体过程仍然在开发阶段。而对于确保产品页面的多向兼容性，以及页面的自封口等代码完整性；故此采用过渡型或框架型DTD标准。</li>
							<li>代码段：<code>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD  XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;</code> <code>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML  1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd&quot;&gt;</code> </li>
						</ul>
					</li>
					<li>
						<h4>命名空间规范</h4>
						<ul>
							<li>释　意：由于xml允许你自己定义自己的标识，你定义的标识和其他人定义的标识有可能相同，但表示不同的意义。当文件交换或者共享的时候就容易产生错误。为了避免这种错误发生，XML采用名字空间声明，允许你通过一个网址指向来识别你的标识。</li>
							<li>阐　述：XHTML是HTML向XML过渡的标识语言，它需要符合XML文档规则，因此也需要定义名字空间。又因为XHTML1.0不能自定义标识，所以它的名字空间都相同，就是“http://www.w3.org/1999/xhtml”。</li>
							<li>代码段：<code>&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;zh-cn&quot; lang=&quot;zh-cn&quot;&gt;</code> </li>
						</ul>
					</li>
					<li>
						<h4>META规范</h4>
						<ul>
							<li>释　意：meta是html语言head区的一个辅助性标签。存储html页面的浏览器解释，以及SEO机器爬虫的辅助性信息。Meta部分代码当前公司内常用到的分别对应的有：Content-Type，文档编码类型；Content-Language，文档使用语言；robots，机器爬虫允许爬行范围；author，页面作者；Copyright，页面版权信息；Description，页面内容的概要；Keywords，页面内容的关键字。</li>
							<li>阐　述：Content-Type在业务尚未前后台实现国际化前不应使用charset=utf-8，而使用旧有编码形式；故为charset=gb2312。Description以及Keywords在页面的初期应当按照站点的总体推广而安放广告词以及关键词进行SEO；在站点的中期（项目上线3个月以上）按照具体页面的实际内容进行调整，做针对性SEO工作。</li>
							<li>代码段：<code>&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=gb2312&quot; /&gt;<br />
								&lt;meta http-equiv=&quot;Content-Language&quot; content=&quot;zh-cn&quot; /&gt;<br />
								&lt;meta name=&quot;robots&quot; content=&quot;all&quot; /&gt;<br />
								&lt;meta name=&quot;author&quot; content=&quot;Tencent. ISRD WEB Rebuilder.&quot; /&gt;<br />
								&lt;meta name=&quot;Copyright&quot; content=&quot;Copyright (c) 2000-2009 Tencent.&quot; /&gt;<br />
								&lt;meta name=&quot;Description&quot; content=&quot;Regulations of WEB Code in Tencent.&quot; /&gt;<br />
								&lt;meta name=&quot;Keywords&quot; content=&quot;Tencent,重构,web,xhtml,css,javascript,api,seo&quot; /&gt;</code> </li>
						</ul>
					</li>
					<li>
						<h4>LINK规范</h4>
						<ul>
							<li>释　意：link是html语言head区的一个文件外部连接标签。通常包含Shortcut Icon，站点快捷方式图标；Bookmark，收藏夹图标；alternate，订阅更新；以及最长见的外部连接样式表。</li>
 此次							<li>阐　述：所有代表产品品牌的图标必须应用至任一页面代码当中；拥有聚合更新的业务比必须包含对应的rss聚合连接；外部样式文件必须使用单独分立的样式状态如media="screen"或者media="handheld"，切勿使用media="all"覆盖所有终端。</li>
							<li>代码段：<code>&lt;link rel=&quot;Shortcut Icon&quot; href=&quot;/favicon.ico&quot; type=&quot;image/x-icon&quot; /&gt;<br />
								&lt;link rel=&quot;Bookmark&quot; href=&quot;/favicon.ico&quot; type=&quot;image/x-icon&quot; /&gt;<br />
								&lt;link rel=&quot;alternate&quot; type=&quot;application/rss+xml&quot; title=&quot;RSS news feed&quot; href=&quot;/rss.xml&quot; /&gt;<br />
								&lt;link href=&quot;/style/screen/rainbow/index.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot; /&gt;<br />
								&lt;link href=&quot;/style/handheld/index.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;handheld&quot; /&gt; </code> </li>
						</ul>
					</li>
					<li>
						<h4>HTML DOM节点编写规范</h4>
						<ul>
							<li>释　意：dom节点是html当中的一个个tag标记按照特殊语法组成的对象元素。</li>
							<li>阐　述：为了确保js的引用不容易出现错误，dom节点编写方式必须确保一一对应并封口，或者对于部分自封口元素需要自封口（input、img、br等）；且dom节点必须使用小写进行编写以及不得存在交错嵌套。</li>
							<li>代码段：<code>&lt;div class=&quot;main&quot;&gt;&lt;/div&gt;<br />
								&lt;p class=&quot;content&quot;&gt;&lt;/p&gt; <br />
								&lt;br /&gt;<br />
								&lt;img alt=&quot;开通按钮&quot;  src=&quot;http://imgcache.qq.com/musicportal_v3/vip/img/bg.png&quot; /&gt;<br />
								<del>&lt;p&gt;&lt;b&gt;&lt;/p&gt;/b&gt; </del><br />
								<del>&lt;P&gt;&lt;B&gt;&lt;/B&gt;&lt;/P&gt; </del><br />
								&lt;p&gt;&lt;b&gt;&lt;/b&gt;&lt;/p&gt; </code> </li>
							<li>另　外：
								<ul>
									<li>任何小于号（&lt;），不是标签的一部分，都必须被编码为&amp;lt; </li>
									<li>任何大于号（&gt;），不是标签的一部分，都必须被编码为&amp;gt;</li>
									<li>任何与号（&amp;），不是实体的一部分的，都必须被编码为&amp;amp;</li>
								</ul>
							</li>
						</ul>
					</li>
					<li>
						<h4>HTML 属性编写规范</h4>
						<ul>
							<li>释　意：属性是html当中的一个个DOM节点的附属说明。</li>
							<li>阐　述：为了确保js的引用不容易出现错误，以及代码工作的同一性，属性名必须采用小写；属性值必须由双引号包围；属性值当中避免使用"-"号作为连接符而更改为"_"以防止人为遗漏双引号的时候被当作两个变量相减；属性值也尽可能使用小写（文件头部固定的属性值等除外），以防止各人使用驼峰的风格不一致；旧有单一属性必须使用赋值形式出现；img的dom节点必须包含alt图片内容说明属性。</li>
							<li>代码段：<code> <del>&lt;p class=main&gt;&lt;/p&gt; </del><br />
								&lt;div class=&quot;main&quot;&gt;&lt;/div&gt;<br />
								<del>&lt;p class=&quot;iphone-app&quot;&gt;&lt;/p&gt; </del><br />
								<del>&lt;p class=&quot;iPhoneApp&quot;&gt;&lt;/p&gt; </del><br />
								&lt;p class=&quot;iphone_app&quot;&gt;&lt;/p&gt;<br />
								<del>&lt;td nowrap&gt;&lt;/td&gt; </del><br />
								&lt;td nowrap=&quot;nowrap&quot;&gt;&lt;/td&gt;<br />
								&lt;img alt=&quot;开通按钮&quot;  src=&quot;http://imgcache.qq.com/musicportal_v3/vip/img/bg.png&quot; /&gt; </code> </li>
						</ul>
					</li>
					<li>
						<h4>HTML 注释编写规范</h4>
						<ul>
							<li>释　意：注释是为了方便多人协同开发时表示开发信息传递的最有效工具</li>
							<li>阐　述：为了统一团队的注释性语言可按照区块、内容命名、模式、开始结束的方式进行前后对应注释；同样的，此标准遵从dom的不可交错嵌套的书写方式，且必须在对应模块的dom节点外部。</li>
							<li>代码段：<code> &lt;!-- 区块 内容命名 [模块 / 循环] 开始 --&gt;<br />
								&lt;!-- 区块 内容命名 [模块 / 循环] 结束 --&gt;<br />
								<br />
								&lt;!-- 首页 新闻 模块 开始 --&gt;</code> </li>
						</ul>
					</li>
					<li>
						<h4>CSS HACK规范</h4>
						<ul>
							<li>释　意：为使得表现兼容各个品牌浏览器而单独设定的基于浏览器差异化Bug的代码。</li>
							<li>阐　述：因为IE拥有预留的hack标注方式，故IE的HACK应当采用注释HACK的方式加入。</li>
							<li>代码段：<code> &lt;!--[if IE 7]&gt;<br />
								&lt;link href=&quot;/style/screen/rainbow/ie7.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot; /&gt;<br />
								&lt;![endif]--&gt;<br />
								&lt;!--[if lt IE 7]&gt;<br />
								&lt;link href=&quot;/style/screen/rainbow/ie7lt.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot; /&gt;<br />
								&lt;![endif]--&gt; </code> </li>
						</ul>
					</li>
					<li>
						<h4>CSS 编码编写规范</h4>
						<ul>
							<li>释　意：编码代码是确认CSS的读取编码所声明的命令行</li>
							<li>阐　述：为了使得CSS代码不受特殊文字干扰，且让注释浅显易懂；故共同约定编码采用UTF-8，并把CSS文件保存成带有签名的UTF-8文件。</li>
							<li>代码段：<code> @charset "utf-8";</code> </li>
						</ul>
					</li>
					<li>
						<h4>CSS 代码编写排列规范</h4>
						<ul>
							<li>释　意：代码编写排列是按照个人阅读习惯所定的一种共同约定</li>
							<li>阐　述：因团队内各人的编写风格以及习惯不一，故此采用并不作限制只要求每个属性赋值后需标写分号，并可以使用DreamWeaver进行整理成为各自习惯风格作为要求。</li>
							<li>代码段：<code> #contents,<br />
								#contents li { margin-left:20px; }<br />
								#contents li li { list-style:lower-roman; }<br />
								#content { margin:20px; padding:70px 0 100px; border-top:1px dotted #CCC; }<br />
								#content li { margin-left:20px; }<br />
								#content ol { margin-bottom:100px; }<br />
								#content ol ol { margin-bottom:0; list-style:lower-roman; }<br />
								#content ul { margin-bottom:0; list-style:square; }<br />
								#content ul ul { list-style:circle; }<br />
								#content ol ol code { display:block; background:#F1F1F1; border:1px solid #CCC; margin-bottom:10px; padding:2px 8px; }</code> </li>
						</ul>
					</li>
					<li>
						<h4>CSS 背景编写规范</h4>
						<ul>
							<li>释　意：背景内容块中用作装饰的图片或者颜色</li>
							<li>阐　述：为了更好的实现结构与表现相分离，内容图独立使用img标签，其余装饰性背景图使用样式控制；图片背景需要取用相对于服务器跟目录的绝对路径，或视实际情况。</li>
							<li>代码段：<code>.list .ico_bd { margin:0 5px; line-height:25px; text-indent:25px; background:url(/qqshow_v3/ac/paradise/bg_quick.png) no-repeat -970px -107px; zoom:1; }<br />
								.list ul { overflow:hidden; zoom:1; margin:0 9px 9px; list-style:none; }<br />
								.list li { overflow:hidden; padding:3px 0; Clear:both; }</code> </li>
						</ul>
					</li>
					<li>
						<h4>CSS 注释编写规范</h4>
						<ul>
							<li>释　意：注释是为了方便多人协同开发时表示开发信息传递的最有效工具</li>
							<li>阐　述：为了统一团队的注释性语言可按照区块、内容命名、开始结束的方式进行前后对应注释。</li>
							<li>代码段：<code>/*-- 区块 内容命名 开始 --*/<br />
								/*-- 区块 内容命名 结束 --*/<br />
								<br />
								/*-- 首页 新闻 开始 --*/<br />
								#index_news,<br />
								#index_news li { margin-left:20px; }<br />
								#index_news li li { list-style:lower-roman; }<br />
								#index_news.mode { margin:20px; padding:70px 0 100px; border-top:1px dotted #CCC; }<br />
								/*-- 首页 新闻 结束 --*/<br />
								</code> </li>
						</ul>
					</li>
				</ol>
			</li>
			<li>
				<h3>质量评估标准</h3>
				<ol>
					<li>保证HTML原形结构嵌套符合W3C要求，W3C标准验证主要检查HTML 嵌套及最基本的语义化(FF W3C验证插件，SGML模式)。</li>
					<li>观察CPU的占用情况，确保打开页面后CPU占用率在80%以下；页面的渲染速度是不是明显感觉很慢，确保无卡断情况出现。</li>
					<li>图片需尽可能合并以减少网络连接数。</li>
					<li>所有注释代码除IE条件hack以外尽可能在上线时去除。</li>
					<li>定期审查页面对服务器请求有无404返回，并修改妥当。</li>
				</ol>
			</li>
		</ol>
	</div>
</div>
</body>
</html>
